<template>
	<view>
		<!-- <import src="../../../wxParse/wxParse.wxml"></import> -->
		<view class="container p-bottom" v-if=" detail.active_id ">

			<!-- 商品信息 -->
			<view class="header dis-flex">
				<view class="header_lf" @tap="onTargetGoods">
					<image :src="goods.goods_image"></image>
				</view>
				<view class="header_rt">
					<view class="goods-name" @tap="onTargetGoods">
						<text class="twolist-hidden">{{ goods.goods_name }}</text>
					</view>
					<view class="goods-price">
						<text class="f-26 col-m">￥</text>
						<text class="m-price">{{ goods.goods_sku.sharing_price }}</text>
						<text class="line-price" v-if=" goods.goods_sku.line_price > 0 ">￥{{ goods.goods_sku.line_price }}</text>
					</view>
					<view class="goods-tag">
						<text class="tag-item">{{ detail.people }}人团</text>
						<text class="tag-item" v-if=" goods.goods_sku.line_price > 0 ">拼团省{{ goods.goods_sku.diff_price }}</text>
					</view>
				</view>
			</view>

			<!-- 拼团成员 -->
			<view class="main">

				<!-- 拼团状态 (成功、失败) -->
				<view v-if=" detail.status.value == 30 " class="main_status main_status__fail">
					<text class="status-icon iconfont icon-shibai"></text>
					<text>超过有效时间，拼团失败</text>
				</view>
				<view v-if=" detail.status.value == 20 " class="main_status main_status__success">
					<text class="status-icon iconfont icon-success"></text>
					<text>拼团已成功</text>
				</view>

				<!-- 参团用户 -->
				<view class="main_user">
					<view v-for="(item,indexss) in detail.users " :key="indexss" class="user-item">
						<image :src="item.user.avatarUrl"></image>
						<view v-if=" item.is_creator == 1 " class="user-role">
							<text>团长</text>
						</view>
					</view>
					<!-- 虚位以待 -->
					<view v-for="(item,key) in detail.surplus_people " :key="key" class="user-item user-item__wait dis-flex flex-x-center flex-y-center">
						<text class="iconfont icon-wenhao"></text>
					</view>
				</view>

				<!-- 拼单状态：拼团中 -->
				<view v-if=" detail.status.value == 10 " class="main_status main_tiem">
					<text>还差 </text>
					<text class="main_timer_color">{{ detail.surplus_people }}</text>
					<text> 个名额，</text>
					<view class="tui-countdown-content" v-for="(item,index) in countDownList" :key="index">
						<!-- <text class="tui-conutdown-box">{{item.day}}</text>: -->
						<text class="tui-conutdown-box">{{item.hou}}</text> :
						<text class="tui-conutdown-box">{{item.min}}</text> :
						<text class="tui-conutdown-box tui-countdown-bg">{{item.sec}}</text>
					</view>
					<text> 后结束</text>
				</view>

				<!-- 操作按钮 -->
				<block v-if=" detail.status.value == 10 ">
					<button v-if=" !is_join " @tap="onTriggerOrder">立即参团</button>
					<button v-else open-type="share">立即分享</button>
				</block>
				<button v-else @tap="onTargetGoods">去开团</button>
			</view>

			<!-- 拼团须知 -->
			<view class="notice" @tap="onToggleRules">
				<text class="f-30">拼团须知</text>
				<text class="t-brief">{{ basic.rule_brief }}</text>
				<text class="icon-arrow"></text>
			</view>

			<!-- 更多拼团 -->
			<view class="content" v-if="goodsList.data.length ">
				<view class="content_top" @tap="onTargetIndex">
					<text class="f-30">更多拼团</text>
					<text class="icon-arrow"></text>
				</view>
				<view v-for="(item,datakey) in goodsList.data " :key="datakey" class="content_main dis-flex" @tap="onTargetGoods"
				 :data-id=" item.goods_id ">
					<view class="goods-image">
						<image :src=" item.goods_image "></image>
					</view>
					<view class="goods-detail">
						<view class="goods-name twolist-hidden">
							<text>{{ item.goods_name }}</text>
						</view>
						<view class="goods-sales">
							<text>已团{{ item.goods_sales }}件</text>
						</view>
						<view class="goods-detail_bottom clear">
							<view class="bottom-right onelist-hidden fl dis-flex flex-y-end">
								<text class="f-24 col-m">￥</text>
								<text class="goods-price col-m">{{ item.goods_sku.sharing_price }}</text>
								<text class="line-price">￥{{ item.goods_sku.line_price }}</text>
							</view>
							<button class="fr btn-navie">去开团</button>
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 快捷导航 -->
		<shortcut right="50upx" bottom="200upx"></shortcut>

		<!-- 确认购买弹窗 -->
		<view class="pop pop--bottom" :class="[showBottomPopup ? 'pop--show' : '']" @close="onToggleTrade">
			<view class="pop__mask " @tap="handleMaskClick"></view>
			<view class="pop__container">
				<view class="popup__trade">
					<!-- 关闭按钮 -->
					<view class="trade-close dis-flex flex-x-center flex-y-center" @tap="onToggleTrade">
						<text class="iconfont icon-close f-26"></text>
					</view>
					<!-- 主体信息 -->
					<view class="trade-main">
						<view class="goods-info dis-flex">
							<!-- 图片名称 -->
							<view class="goods-image" @tap="onPreviewSkuImage">
								<image :src="skuCoverImage"></image>
							</view>
							<view class="flex-box">
								<view class="money-box">
									<text class="col-m f-26">￥</text>
									<text class="price col-m">{{ sharing_price }}</text>
									<text class="del" v-if="line_price>0">￥{{line_price}}</text>
								</view>
								<view class="goods-stock dis-flex">
									<text class="flex-box f-26 col-7">库存：{{stock_num}}</text>
								</view>
							</view>
						</view>
						<!-- 规格列表 -->
						<view class="goods-list-box" scroll-y="true">
							<view class="cf tmall-types" v-for="(item,attindex) in goodsMultiSpec.spec_attr " v-for-item="attindex"
							 v-for-index="attr_idx" :key="index">
								<view class="tipstxt" :data-id="attr.group_id">{{attr.group_name}}</view>
								<view class="cf cartypelist" v-for="(item,itemkey) in attr.spec_items" :v-for-index="item_idx" :key="itemkey">
									<view v-if="item.checked">
										<form @submit="onSwitchSpec" report-submit="true" :data-attr-idx="attr_idx" :data-item-idx="item_idx">
											<button form-type="submit" class="btn-normal">
												<view class="cartypeitem cur">{{item.spec_value}}</view>
											</button>
										</form>
									</view>
									<view v-else>
										<form @submit="onSwitchSpec" report-submit="true" :data-attr-idx="attr_idx" :data-item-idx="item_idx">
											<button form-type="submit" class="btn-normal">
												<view class="cartypeitem">{{item.spec_value}}</view>
											</button>
										</form>
									</view>
								</view>
							</view>
						</view>
						<!-- 购买数量 -->
						<view class="buy_number">
							<view class="buyNumber f-26">
								<text>购买数量</text>
							</view>
							<view class="select-number">
								<form @submit="onDecGoodsNumber" report-submit="true">
									<button form-type="submit" class="default" :class="goods_num>1?'':' disabled'" type="default">-</button>
								</form>
								<input @input="onInputGoodsNum" type="number" :value="goods_num"></input>
								<form @submit="onIncGoodsNumber" report-submit="true">
									<button form-type="submit" class="default" type="default">+</button>
								</form>
							</view>
						</view>
					</view>
					<!-- 底部操作栏 -->
					<view class="footer-fixed f-30">
						<block v-if="stock_num > 0">
							<view class="order-bt dis-flex flex-x-center flex-y-center" @tap="onCheckout" data-type="buyNow">
								<text>确定</text>
							</view>
						</block>
						<view class="default-btn" v-else>暂无现货</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <zandialog id="zan-base-dialog"></zandialog> -->

		<xy-dialog title="拼团规则" content="" :show="dialogshow" @cancelButton="clickCancel" @confirmButton="clickConfirm"
		 :isShowCancel="!dialogshow" confirmColor="#df5000">
			<!-- rule_detail -->
			<view style="padding: 0 30upx 30upx;text-align:left;">
				<view v-for="(items,indexs) in rule_detail" :key='index' style="margin: 20upx 0upx;">
					{{items}}
				</view>
			</view>
		</xy-dialog>

	</view>
</template>

<script>
	const App = getApp();
	// const Sharing = require('../../../utils/extend/sharing.js');
	const dialog = require('../../../components/dialog/dialog');

	// 工具类
	const util = require('../../../utils/util.js');

	// 记录规格的数组
	const goodsSpecArr = [];

	import shortcut from '../../../components/goods/shortcut.vue'
	// import zandialog from '../../../components/dialog/index.vue'
	import xyDialog from '@/components/xy-dialog/xy-dialog.vue';
	export default {
		components: {
			// （组件命名）
			shortcut,
			// zandialog
			xyDialog
		},
		props: {
			shortcut: {},
			zandialog: {}
		},
		data() {
			return {
				dialogshow: false, //拼团规则是否显示
				rule_detail: {},
				detail: {}, // 拼单详情
				goodsList: [], // 更多拼团列表
				setting: {}, // 拼团设置
				is_join: false, // 当前用户是否已参团
				is_creator: false, // 当前是否为创建者(团长)

				goods_price: 0, // 商品价格
				line_price: 0, // 划线价格
				stock_num: 0, // 库存数量
				goods: {},
				goods_num: 1, // 商品数量
				goods_sku_id: 0, // 规格id
				goodsMultiSpec: {}, // 多规格信息

				countDownList: [],
				actEndTimeList: [],
				showBottomPopup: false,
				skuCoverImage: null,
				sharing_price: null,
				basic: {},

			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(option) {
			let _this = this;

			// 获取拼团详情
			_this.getActiveDetail(option.active_id);
			// 获取拼团设置
			_this.getSetting();
		},
		methods: {
			/**
			 * 获取拼团设置
			 */
			getSetting() {
				let _this = this;
				_this._get('sharing.setting/getAll', {},

					function(result) {
						let setting = result.data.setting;
						_this.setData(
							setting
						);
					});
			},

			/**
			 * 获取拼团详情
			 */
			getActiveDetail(active_id) {
				let _this = this;
				_this._get('sharing.active/detail', {
					active_id
				}, result => {
					// 创建当前页面数据
					_this.createPageData(result.data);
				});
			},

			/**
			 * 创建页面数据
			 */
			createPageData(data) {
				let _this = this;
				// 商品详情

				let goodsDetail = data.goods;
				// 当前用户是否已参团
				data['is_join'] = _this.checkUserIsJoin(data.detail.users);
				// console.log(data['is_join']);
				// 当前用户是否为创建者
				data['is_creator'] = !!(data.detail.creator_id == _this.getUserId())
				// 拼团结束时间
				data['actEndTimeList'] = [data.detail.end_time.text];

				// 商品价格/划线价/库存
				data.goods_sku_id = goodsDetail.goods_sku.spec_sku_id;
				data.sharing_price = goodsDetail.goods_sku.sharing_price;
				data.goods_price = goodsDetail.goods_sku.goods_price;
				data.line_price = goodsDetail.goods_sku.line_price;
				data.stock_num = goodsDetail.goods_sku.stock_num;
				// 商品封面图(确认弹窗)
				data.skuCoverImage = goodsDetail.goods_image;
				// 多规格商品封面图(确认弹窗)
				if (goodsDetail.spec_type == 20 && goodsDetail.goods_sku['image']) {
					data.skuCoverImage = goodsDetail.goods_sku['image']['file_path'];
				}
				// 初始化商品多规格
				if (goodsDetail.spec_type == 20) {
					data.goodsMultiSpec = _this._initGoodsDetailData(goodsDetail.goods_multi_spec);
				}
				// 赋值页面数据
				_this.setData(data);

				// console.log(data);
				// console.log(_this.goods);

				// 执行倒计时函数
				_this.onCountDown();
			},

			/**
			 * 初始化商品多规格
			 */
			_initGoodsDetailData(data) {
				for (let i in data.spec_attr) {
					for (let j in data.spec_attr[i].spec_items) {
						if (j < 1) {
							data.spec_attr[i].spec_items[0].checked = true;
							goodsSpecArr[i] = data.spec_attr[i].spec_items[0].item_id;
						}
					}
				}
				return data;
			},

			/**
			 * 点击切换不同规格
			 */
			onSwitchSpec(e) {
				let _this = this,
					attrIdx = e.currentTarget.dataset.attrIdx,
					itemIdx = e.currentTarget.dataset.itemIdx,
					goodsMultiSpec = _this.goodsMultiSpec;

				// 记录formid
				_this.saveFormId(e.detail.formId);

				for (let i in goodsMultiSpec.spec_attr) {
					for (let j in goodsMultiSpec.spec_attr[i].spec_items) {
						if (attrIdx == i) {
							goodsMultiSpec.spec_attr[i].spec_items[j].checked = false;
							if (itemIdx == j) {
								goodsMultiSpec.spec_attr[i].spec_items[itemIdx].checked = true;
								goodsSpecArr[i] = goodsMultiSpec.spec_attr[i].spec_items[itemIdx].item_id;
							}
						}
					}
				}
				_this.setData({
					goodsMultiSpec
				});
				// 更新商品规格信息
				_this._updateSpecGoods();
			},

			/**
			 * 更新商品规格信息
			 */
			_updateSpecGoods() {
				let _this = this,
					specSkuId = goodsSpecArr.join('_');
				// 查找skuItem
				let spec_list = _this.goodsMultiSpec.spec_list,
					skuItem = spec_list.find((val) => {
						return val.spec_sku_id == specSkuId;
					});
				// 记录goods_sku_id
				// 更新商品价格、划线价、库存
				if (typeof skuItem === 'object') {
					_this.setData({
						goods_sku_id: skuItem.spec_sku_id,
						goods_price: skuItem.form.goods_price,
						sharing_price: skuItem.form.sharing_price,
						line_price: skuItem.form.line_price,
						stock_num: skuItem.form.stock_num,
						skuCoverImage: skuItem.form.image_id > 0 ? skuItem.form.image_path : _this.goods.goods_image
					});
				}
			},

			/**
			 * 验证当前用户是否已参团
			 */
			checkUserIsJoin(users) {
				let _this = this;
				let user_id = _this.getUserId();
				if (!user_id) {
					return false;
				}
				let isJoin = false;
				users.forEach((item) => {
					user_id == item.user_id && (isJoin = true);
				});
				return isJoin;
			},


			/**
			 * 小于10的格式化函数
			 */
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},

			/**
			 * 倒计时函数
			 */
			onCountDown() {
				// 获取当前时间，同时得到活动结束时间数组
				let newTime = new Date().getTime();
				let endTimeList = this.actEndTimeList;
				let countDownArr = [];

				// 对结束时间进行处理渲染到页面
				endTimeList.forEach(o => {
					let endTime = new Date(util.format_date(o)).getTime();
					let obj = null;

					// 如果活动未结束，对时间进行处理
					if (endTime - newTime > 0) {
						let time = (endTime - newTime) / 1000;
						// 获取天、时、分、秒
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt(time % (60 * 60 * 24) / 3600);
						let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
						let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
						obj = {
							day: day,
							hou: this.timeFormat(hou),
							min: this.timeFormat(min),
							sec: this.timeFormat(sec)
						}
					} else { //活动已结束，全部设置为'00'
						obj = {
							day: '00',
							hou: '00',
							min: '00',
							sec: '00'
						}
					}
					countDownArr.push(obj);
				})
				// 渲染，然后每隔一秒执行一次倒计时函数
				this.setData({
					countDownList: countDownArr
				})
				setTimeout(this.onCountDown, 1000);
			},

			/**
			 * 查看拼团规则
			 */
			onTargetRules() {
				uni.navigateTo({
					url: '../rules/index',
				})
			},

			/**
			 * 显示拼团规则
			 */
			onToggleRules() {

				let _this = this;

				var str = _this.setting.basic.rule_detail;
				var rule_detail = str.split(";");

				_this.setData({
					dialogshow: !_this.dialogshow,
					rule_detail: rule_detail,
				});
				return false;

				// uni-app未知原因无法使用自定义Dialog组件
				Dialog({
					title: '拼团规则',
					message: _this.basic.rule_detail,
					selector: '#zan-base-dialog',
					buttons: [{
						text: '关闭',
						color: 'red',
						type: 'cash'
					}]
				});
			},

			/**
			 * 跳转商品详情页
			 */
			onTargetGoods(e) {
				let goodsId = e.currentTarget.dataset.id > 0 ? e.currentTarget.dataset.id : this.detail.goods_id;
				uni.navigateTo({
					url: '../goods/index?goods_id=' + goodsId,
				});
			},

			/**
			 * 增加商品数量
			 */
			onIncGoodsNumber(e) {
				let _this = this;
				_this.saveFormId(e.detail.formId);
				_this.setData({
					goods_num: ++_this.goods_num
				})
			},

			/**
			 * 减少商品数量
			 */
			onDecGoodsNumber(e) {
				let _this = this;
				_this.saveFormId(e.detail.formId);
				if (_this.goods_num > 1) {
					_this.setData({
						goods_num: --_this.goods_num
					});
				}
			},

			/**
			 * 自定义输入商品数量
			 */
			onInputGoodsNum(e) {
				let _this = this,
					iptValue = e.detail.value;
				if (!util.isPositiveInteger(iptValue) && iptValue !== '') {
					iptValue = 1;
				}
				_this.setData({
					goods_num: iptValue
				});
			},

			/**
			 * 加入购物车and立即购买
			 */
			onCheckout(e) {
				let _this = this;
				// 表单验证
				if (!_this._onVerify()) {
					return false;
				}
				// 立即购买
				uni.navigateTo({
					url: '../checkout/index?' + util.urlEncode({
						order_type: 20,
						active_id: _this.detail.active_id,
						goods_id: _this.goods.goods_id,
						goods_num: _this.goods_num,
						goods_sku_id: _this.goods_sku_id,
					})
				});
			},

			/**
			 * 表单验证
			 */
			_onVerify() {
				let _this = this;
				if (_this.goods_num === '') {
					_this.showError('请输入购买数量');
					return false;
				}
				// 将购买数量转为整型，防止出错
				_this.setData({
					goods_num: parseInt(_this.goods_num)
				});
				if (_this.goods_num <= 0) {
					_this.showError('购买数量不能为0');
					return false;
				}
				return true;
			},

			/**
			 * 预览Sku规格图片
			 */
			onPreviewSkuImage(e) {
				let _this = this;
				uni.previewImage({
					current: _this.image_path,
					urls: [_this.image_path]
				})
			},

			/**
			 * 分享当前页面
			 */
			onShareAppMessage() {
				let _this = this;
				// 构建页面参数
				let params = _this.getShareUrlParams({
					'active_id': _this.detail.active_id
				});
				return {
					title: _this.goods.goods_name,
					path: "/pages/sharing/active/index?" + params
				};
			},

			/**
			 * 确认购买弹窗
			 */
			onToggleTrade(e) {
				this.setData({
					showBottomPopup: !this.showBottomPopup
				});
			},

			/**
			 * 立即下单
			 */
			onTriggerOrder(e) {
				let _this = this;
				_this.onToggleTrade();
			},

			/**
			 * 跳转到拼团首页
			 */
			onTargetIndex(e) {
				uni.navigateTo({
					url: '../index/index',
				})
			},
		}
	}
</script>

<style>
	page {
		background: #f3f3f3;
	}

	view {
		word-break: break-all;
		/* overflow: auto; */
	}

	/* 箭头图标 */

	.icon-arrow {
		display: inline-block;
		width: 0;
		height: 0;
		border-width: 10upx;
		border-style: solid;
		border-color: transparent transparent transparent #ccc;
	}

	/* 商品信息 */

	.header {
		margin: auto;
		margin-top: 70upx;
		padding: 30upx 20upx;
		width: 95%;
		background: #fff;
		border-radius: 10upx;
		box-sizing: border-box;
		box-shadow: 0px 5px 12px rgb(226, 226, 226);
	}

	.header .header_lf {
		box-shadow: 0px 2px 8px #e6e6e6;
		margin: -70upx 20upx 10upx 10upx;
	}

	.header .header_lf image {
		display: block;
		width: 320upx;
		height: 320upx;
	}

	.header .header_rt {
		background: #fff;
	}

	.header .header_rt .goods-name {
		display: block;
		font-size: 24upx;
		line-height: 2;
	}

	.header .header_rt .goods-price {
		margin: 20upx 10upx;
	}

	.header .header_rt .goods-price .m-price {
		display: inline-block;
		font-size: 40upx;
		color: #ff495e;
	}

	.header .header_rt .goods-price .line-price {
		display: inline-block;
		margin: 10upx;
		font-size: 24upx;
		color: #8e8e8e;
		text-decoration: line-through;
	}

	.header .header_rt .goods-tag .tag-item {
		display: inline-block;
		padding: 4upx 12upx;
		font-size: 24upx;
		line-height: 36upx;
		border-radius: 5upx;
		color: #FF6464;
		background: #FEEEEE;
		margin-left: 10upx;
		margin-bottom: 10upx;
		box-sizing: border-box;
	}

	.header:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0;
	}

	/* 拼团成员 */

	.main {
		margin: auto;
		margin-top: 30upx;
		padding: 50upx 20upx;
		width: 95%;
		background: #fff;
		border-radius: 10upx;
		box-sizing: border-box;
		box-shadow: 0px 5px 12px rgb(226, 226, 226);
	}

	.main .main_user {
		display: flex;
		margin: auto;
		width: 600upx;
		flex-wrap: wrap;
		margin-bottom: 30upx;
	}

	.main .main_user .user-item {
		width: 100upx;
		height: 100upx;
		margin: 0 25upx 25upx 0;
		position: relative;
		box-sizing: border-box;
	}

	.main .main_user .user-item:nth-child(5n+0) {
		margin-right: 0;
	}

	.main .main_user .user-item image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 1upx solid #f3f3f3;
	}

	.main .main_user .user-item .user-role {
		width: 100%;
		text-align: center;
		height: 40upx;
		position: absolute;
		left: 0;
		bottom: -1upx;
	}

	.main .main_user .user-item .user-role text {
		background: #fa1e8c;
		border-radius: 15upx;
		display: inline-block;
		line-height: 1.4;
		font-size: 24upx;
		color: #fff;
		width: 78upx;
	}

	.main .main_user .user-item.user-item__wait {
		border-radius: 50%;
		background: #f8f8f8;
		border: 1upx dashed #dbdbdb;
	}

	.main .main_user .user-item.user-item__wait text {
		color: #dbdbdb;
		font-size: 38upx;
	}

	/* 拼团状态 */

	.main_status {
		margin-bottom: 40upx;
		font-size: 35upx;
		text-align: center;
	}

	.main_status__fail {
		color: #ff495e;
	}

	.main_status__success {
		color: #08b625;
	}

	.main_status .status-icon {
		margin-right: 15upx;
	}

	/* 倒计时 */

	.main_tiem .main_timer_color {
		color: #fc8434;
	}

	.main_tiem view {
		display: inline-block;
	}

	.main_tiem view text {
		display: inline-block;
		padding: 10upx 5upx;
		background: #e5e5e5;
	}

	.main button {
		display: block;
		margin-top: 40upx;
		width: 350upx;
		line-height: 90upx;
		font-size: 29upx;
		background: #fbeb4e;
		border: none;
		box-shadow: 0px 3px 12px #fbc293;
	}

	.main button:after {
		content: none;
		border: none;
	}

	/* 更多拼团 */

	.content {
		margin: auto;
		margin-top: 30upx;
		width: 95%;
		background: #fff;
		border-radius: 10upx;
		box-sizing: border-box;
		box-shadow: 0px 5px 12px rgb(226, 226, 226);
	}

	.content_top {
		padding: 35upx 20upx;
		display: flex;
		padding-bottom: 30upx;
		justify-content: space-between;
		align-items: center;
	}

	.content_main {
		padding: 25upx;
		justify-content: space-between;
		border-top: 1upx solid rgb(238, 238, 238);
	}

	.content_main .goods-image {
		width: 240upx;
		height: 240upx;
		border-radius: 10upx;
	}

	.content_main .goods-image image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.content_main .goods-detail {
		position: relative;
		width: 410upx;
	}

	.content_main .goods-detail .goods-name {
		font-size: 24upx;
		line-height: 2;
		height: 96upx;
	}

	.content_main .goods-detail .goods-sales {
		margin: 20upx 0;
		font-size: 24upx;
		color: #fc8434;
	}

	.content_main .goods-detail .goods-detail_bottom {
		overflow: hidden;
		height: 55upx;
	}

	.content_main .goods-detail .goods-detail_bottom .bottom-right {
		height: 100%;
		line-height: 1;
	}

	.content_main .goods-detail .goods-price {
		font-size: 38upx;
	}

	.content_main .goods-detail .line-price {
		margin: 0 20upx 0 10upx;
		font-size: 24upx;
		color: #8e8e8e;
		text-decoration: line-through;
	}

	.content_main .goods-detail .btn-navie {
		margin: 0;
		padding: 0;
		width: 130upx;
		background: linear-gradient(to right, #fa1e8c 0, #fc1e56 100%);
		line-height: 55upx;
		height: 100%;
		color: #fff;
		font-size: 26upx;
	}

	/* 拼团须知 */

	.notice {
		display: flex;
		margin: auto;
		margin-top: 30upx;
		padding: 35upx 20upx;
		width: 95%;
		background: #fff;
		border-radius: 10upx;
		box-sizing: border-box;
		box-shadow: 0px 5px 12px rgb(226, 226, 226);
		justify-content: space-between;
		align-items: center;
	}

	.notice .t-brief {
		font-size: 25upx;
		color: #a6a6a6;
	}

	/* 确认购买弹窗 */

	.popup__trade {
		width: 750upx;
		position: relative;
		padding-bottom: 92upx;
		z-index: 999;
	}

	.popup__trade .trade-close {
		position: absolute;
		top: 20upx;
		right: 20upx;
		width: 50upx;
		height: 50upx;
	}

	.popup__trade .trade-main {
		background: #fff;
		box-sizing: border-box;
		padding: 24upx;
	}

	.popup__trade .footer-fixed {
		position: absolute;
	}

	.popup__trade .footer-fixed .order-bt {
		width: 100%;
		line-height: unset;
	}

	.popup__trade .footer-fixed .default-btn {
		width: 100%;
		background-color: #ccc;
		color: #fff;
		text-align: center;
		line-height: 92rpx;
	}

	.popup__trade .trade-main .goods-info {
		margin-bottom: 10upx;
	}

	.popup__trade .trade-main .goods-info .goods-image {
		margin-top: -40px;
		margin-right: 20upx;
	}

	.popup__trade .trade-main .goods-info .goods-image image {
		width: 90px;
		height: 90px;
		border: 5upx solid #fff;
		box-shadow: 0 4upx 10upx rgba(220, 220, 220, 0.79);
	}

	.popup__trade .trade-main .goods-info .money-box {
		margin: 0;
		box-sizing: border-box;
	}

	.popup__trade .trade-main .goods-info .goods-stock {
		padding-left: 10upx;
	}

	.popup__trade .trade-main .buy_number {
		margin: 20upx 0;
		justify-content: space-between;
	}

	.popup__trade .trade-main .buy_number .buyNumber {
		color: #888;
		background: #fff;
		border-radius: 10upx;
		margin-bottom: 10upx;
	}

	/* 商品规格 */

	.goods-list-box .tmall-types.mb20 {
		margin-bottom: 20upx;
	}

	.goods-list-box .tmall-types .tipstxt {
		font-size: 26upx;
		color: #888;
		margin-bottom: 10upx;
	}

	.goods-list-box .tmall-types .cartypelist {
		display: inline-block;
	}

	.goods-list-box .tmall-types .cartypelist .cartypeitem {
		font-size: 26upx;
		height: 55upx;
		line-height: 55upx;
		padding: 0 30upx;
		margin: 0 20upx 20upx 0;
		border-radius: 8upx;
		color: #888;
		border: 1upx solid #e6e6e6;
	}

	.goods-list-box .tmall-types .cartypelist .cartypeitem.cur {
		background: #f20c59;
		border: 1upx solid #f20c59;
		color: #fff;
	}

	.goods-list-box .tmall-types .cartypelist .cartypeitem.cur:after {
		position: absolute;
		bottom: 0;
		right: 0;
		content: '';
		display: inline-block;
		width: 16upx;
		height: 16upx;
	}

	.goods-list-box .tmall-types .cartypelist .cartypeitem.disabled {
		color: #dedede;
		cursor: not-allowed;
		background: #eee;
		border: 2upx dashed #dedede;
	}

	/* 商品价格 */

	.money-box {
		margin: 10upx 0;
	}

	.money-box .price {
		font-size: 40upx;
	}

	.money-box .del {
		font-size: 24upx;
		color: #999;
		margin-left: 6upx;
		TEXT-DECORATION: line-through;
	}

	/* 选择数量 */

	.select-number {
		width: 202rpx;
		height: 52rpx;
		flex-direction: row;
		border: 1rpx solid rgb(231, 231, 231);
		border-radius: 5rpx;
	}

	.select-number .default {
		float: left;
		width: 60rpx;
		height: 52rpx;
		line-height: 48rpx;
		padding: 0;
		background: #fff;
		color: #444;
		font-size: 40rpx;
		border-radius: unset;
	}

	.select-number .disabled {
		background: #f7f7f7;
		color: #ddd;
	}

	.select-number button:after {
		content: none;
		border: none;
	}

	.select-number input {
		float: left;
		width: 80rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-right: 1rpx solid #eee;
		border-left: 1rpx solid #eee;
		text-align: center;
		font-size: 28rpx;
		color: #444;
	}
</style>
